<form nz-form [nzLayout]="'inline'" class="ant-advanced-search-form">
  <nz-form-item>
    <nz-form-label>{{l('site_name')}}</nz-form-label>
    <nz-form-control>
      <input type="text" [(ngModel)]="keyword" [ngModelOptions]="{standalone: true}" nz-input
        [placeholder]="l('please_enter_site_name')">
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label>{{l('site_type')}}</nz-form-label>
    <nz-form-control>
      <nz-select name="siteType" [(ngModel)]="siteType" [ngModelOptions]="{standalone: true}"
        [nzPlaceHolder]="l('please_select_site_type')">
        <nz-option [nzValue]="''" [nzLabel]="l('please_select_site_type')"></nz-option>
        <nz-option *ngFor="let option of siteTypes" [nzValue]="option.itemKey" [nzLabel]="option.itemValue"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item class="control-area">
    <button nz-button [nzType]="'primary'" (click)="load()">{{l("search")}}</button>
    <button nz-button (click)="reset()">{{l("reset")}}</button>
  </nz-form-item>
</form>
<div class="table-control-wrap">
  <button nz-button nzType="primary" (click)="showModal()"><i class="anticon anticon-plus-circle-o"></i>{{l('create')}}
  </button>
  <button nz-button nzType="primary" (click)="fileSelect.click()"><i
      class="anticon anticon-cloud-upload-o"></i>{{l("batch_import")}}
  </button>
  <input #fileSelect type="file" ng2FileSelect [uploader]="uploader" style="display:none" />
</div>

<nz-table #ajaxTable nzShowSizeChanger nzBordered [nzScroll]="{x:'1300px'}" [nzFrontPagination]="false"
  [nzData]="tableHelper.items" [nzLoading]="tableHelper.loading" [nzTotal]="tableHelper.totalCount"
  [(nzPageIndex)]="tableHelper.pageIndex" [nzShowTotal]="totalTemplate" [(nzPageSize)]="tableHelper.pageSize"
  (nzPageIndexChange)="load()" (nzPageSizeChange)="load()">
  <thead>
    <tr>
      <th nzLeft="0px">{{l('serial_number')}}</th>
      <th>{{l('site_name')}}</th>
      <th>{{l('longitude')}}</th>
      <th>{{l('latitude')}}</th>
      <!-- <th>{{l('site_address')}}</th> -->
      <th>{{l('site_manager')}}</th>
      <th>{{l('site_manager_phone')}}</th>
      <th>{{l('site_contact')}}</th>
      <th>{{l('view_address')}}</th>
      <th>{{l('site_type')}}</th>
      <th>{{l('remark')}}</th>
      <th nzRight="0px">{{l("operation")}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of ajaxTable.data;let i = index">
      <td nzLeft="0px">{{i++1}}</td>
      <td>{{data.siteName}}</td>
      <td>{{data.lng}}</td>
      <td>{{data.lat}}</td>
      <!-- <td>{{data.address}}</td> -->
      <td>{{data.manager}}</td>
      <td>{{data.managerPhone}}</td>
      <td>{{data.sitePhone}}</td>
      <td><a (click)="showMap(data)">{{l('view_address')}}</a></td>
      <td>{{data.siteTypeName}}</td>
      <td>{{data.reason}}</td>
      <td nzRight="0px">
        <a (click)="showModal(data.id)">{{l('edit')}}</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a (click)="handleUsing(data)" *ngIf="!data.enableFlag">{{l('enable')}}</a>
        <a (click)="handleUsing(data)" *ngIf="data.enableFlag">{{l('disenable')}}</a>
      </td>
    </tr>
  </tbody>
</nz-table>
<ng-template #totalTemplate let-total>
  {{l('total')}} {{total}} {{l('items')}}
</ng-template>

<nz-modal nzWidth="700px" [(nzVisible)]="isVisible" [nzTitle]="title" (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading">
  <form nz-form [formGroup]="validateForm">
    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="siteName">{{l('site_name')}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="siteName" id="siteName" [(ngModel)]="site.siteName">
        <nz-form-explain *ngIf="validateForm.get('siteName').hasError('required')">{{l("please_enter_site_name")}}</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('siteName').hasError('maxlength')">{{l("please_enter_max_length")}}255</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <!-- <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="address">{{l('site_address')}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="address" id="address" [(ngModel)]="site.address">
        <nz-form-explain *ngIf="validateForm.get('address').errors">{{l('please_enter_address')}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item> -->
    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="lng">{{l('longitude')}}</nz-form-label>
      <nz-form-control>
        <nz-input-number [(ngModel)]="site.lng" formControlName="lng" [nzStep]="1"></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('lng').errors">{{l('please_enter_longitude')}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="lat">{{l('latitude')}}</nz-form-label>
      <nz-form-control>
        <nz-input-number [(ngModel)]="site.lat" formControlName="lat" [nzStep]="1"></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('lat').errors">{{l('please_enter_latitude')}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <!-- <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="radius">{{l('radius')}}</nz-form-label>
      <nz-form-control>
        <nz-input-number [(ngModel)]="site.radius" formControlName="radius" [nzMin]="1" [nzStep]="1"></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('radius').errors">{{l('please_enter_radius')}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item> -->
    <nz-form-item nzFlex>
      <nz-form-label nzFor="managerId">{{l('site_manager')}}</nz-form-label>
      <nz-form-control>
        <nz-select formControlName="managerId" [(ngModel)]="site.managerId" (ngModelChange)="changeUser()">
          <nz-option *ngFor="let option of users" [nzValue]="option.id" [nzLabel]="option.account"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex>
      <nz-form-label nzFor="managerPhone">{{l('site_manager_phone')}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="managerPhone" id="managerPhone" [(ngModel)]="site.managerPhone">
        <nz-form-explain *ngIf="validateForm.get('managerPhone').hasError('maxlength')">{{l('please_enter_max_length')}}20 </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="roleId">{{l('site_contact')}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="sitePhone" id="sitePhone" [(ngModel)]="site.sitePhone">
        <nz-form-explain *ngIf="validateForm.get('sitePhone').hasError('required')">{{l('please_enter_site_contact')}}
        </nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('sitePhone').hasError('maxlength')">{{l('please_enter_max_length')}}20 </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="siteType">{{l('site_type')}}</nz-form-label>
      <nz-form-control>
        <nz-select formControlName="siteType" [(ngModel)]="site.siteType">
          <nz-option *ngFor="let option of siteTypes" [nzValue]="option.itemKey" [nzLabel]="option.itemValue">
          </nz-option>
        </nz-select>
        <nz-form-explain *ngIf="validateForm.get('siteType').errors">{{l('please_select_site_type')}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>


<app-map-circle-modal #mapCircleModal></app-map-circle-modal>
<app-set-site-remark-modal #setSiteRemarkModal (modalSave)="load()"></app-set-site-remark-modal>